<template>
  <div class="contianer">
    <div class="left">
      <div class="leftTitle">
        <div>
          <label>生意转让</label>
          <span>/ 超过10万条有效生意转让</span>
        </div>
        <p @click="gosearch">查看全部生意转让></p>
      </div>
      <div class="leftCont">
        <div v-for="(item,index) in listType" :key="index">
          <h2 @click="gosearch">{{item.title}}</h2>
          <ul>
            <li v-for="(info,i) in item.list" :key="i" @click="gosearch">{{info}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="leftTitle">
        <div>
          <label>热点转让</label>
          <span>/ 超过10万条有效生意转让</span>
        </div>
        <p @click="gosearch">查看全部生意转让></p>
      </div>
      <div class="leftCont">
        <div v-for="(hot,index) in hotAd" :key="index" @click="godetail(hot,1)">
          <!-- <img :src="hot.shPic?hot.shPic:upDefaultCover" alt /> -->
          <el-image :src="hot.shPic?hot.shPic:upDefaultCover" lazy></el-image>
          <p>饭店转让</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listType: [
        {
          title: "美食餐饮",
          list: ["饭店", "酒楼", "火锅店", "咖啡店"]
        },
        {
          title: "娱乐休闲",
          list: ["KTV", "足浴", "桑拿", "休闲会所"]
        },
        {
          title: "美容美发",
          list: ["美容店", "SPA会所", "美发店"]
        },
        {
          title: "旅游宾馆",
          list: ["宾馆", "酒店", "招待所", "度假村"]
        },
        {
          title: "百货超市",
          list: ["小型超市", "便利店", "大型超市"]
        },
        {
          title: "教育培训",
          list: ["培训机构", "休闲书店", "辅导班"]
        },
        {
          title: "综合转让",
          list: ["网吧", "洗衣店", "药店", "生活馆"]
        },
        {
          title: "汽车代理",
          list: ["汽修", "汽车配件", "车行转让"]
        }
      ],
      hotAd: []
    };
  },
  computed: {
    upDefaultCover() {
      return this.$store.state.defaultCover;
    }
  },
  created() {
    this.getHotAd();
  },
  //   热点转让
  methods: {
     gosearch(){
       window.open('/#/findshop')
    },
    godetail(e,i){
      window.open('/#/details'+i+'/' + e.id)
    },
    getHotAd() {
      this.$http.get(this.$api.getAdTypeShopss(1, 10, 0)).then(res => {
        if (res.data.code === 0) {
          if (res.data.rShopss_p) {
            this.hotAd = res.data.rShopss_p;
          }
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
.contianer {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  .left,
  .right {
    width: 48%;
    background: #fff;
    button {
      margin-top: 20px;
      font-size: 16px;
    }
  }
}
.right .leftCont {
  padding: 10px;
  div {
    position: relative;
    height: 97px;
    overflow: hidden;
    padding: 5px;
    cursor: pointer;
  }
}
.leftCont {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  h2 {
    color: #ff5001;
    font-size: 18px;
  }
  div {
    text-align: left;
    width: 50%;
    .el-image {
      width: 100%;
      vertical-align: middle;
    }
    p {
      text-align: center;
      color: #ff9800;
      font-size: 24px;
      font-weight: bold;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    ul {
      display: flex;
      padding: 18px 0 70px 0;
      li {
        cursor: pointer;
        border-right: 1px solid;
        padding-right: 10px;
        margin-right: 10px;
        color: #666;
        font-size: 16px;
      }
      li:last-child {
        border: 0;
      }
    }
  }
}
.leftCont div:nth-child(7) ul {
  padding-bottom: 0;
}
.leftCont div:nth-child(8) ul {
  padding-bottom: 0;
}
.leftTitle {
  padding: 20px;
  font-size: 16px;
  color: #666;
  display: flex;
  background: #eef7fe;
  justify-content: space-between;
  align-items: center;
  p {
    color: #2d8cf0;
    cursor: pointer;
    font-size: 14px;
  }
  div {
    height: 40px;
    label {
      color: #999;
      font-weight: bold;
      font-size: 20px;
    }
    border-bottom: 1px solid #666;
  }
}
</style>
